<template>
  <div ref="dom" style="height: 500px; width: 800px; border: 1px solid rgba(25, 186, 139, .17);top:30px;left:30px"></div>
</template>

<script>
// @ is an alias to /src
// import ChinaHomeChart from '@/components/charts/home.vue'
import * as echarts from "echarts";
export default {
  name: "Home",
  components: {},
  data(){
    return {
      dom: null
    }
  },
  methods: {
    initChart() {
    var option;
    var mycolor = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#8b78f6', '#0c78f1']
    option = {
        // title: {
        //     text: '世界人口总量',
        //     subtext: '数据来自网络'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        // legend: {
        //     // data: ['2011年', '2012年']
        // },
        grid: {
            left: '20%',
            right: '20%',
            bottom: '3%',
            // containLabel: true // 距离x,y轴的距离
        },
        xAxis: {
            // type: 'value',
            // boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: [{
                type: 'category',
                data: ['css', 'js', 'python', 'java', 'go', 'c++'],
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    // 不显示刻度
                    show: false
                },
                axisLabel: {
                    color: '#ccc'
                }
            },
            {
                show: true,
                data: ['css1', 'js2', 'python2', 'java2', 'go2', 'c++2'],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                // axisLabel: {
                //     textStyle: {
                //         fontSize: 12,
                //         color: '#fff'
                //     }
                // }
            }
        ],
        series: [{
                name: '条',
                type: 'bar',
                data: [70, 80, 60, 50, 50, 63],
                yAxisIndex: 0,
                barCategoryGop: 50, //柱子间距离
                barWidth: 10, // 柱子的宽度
                // 柱子的圆角
                itemStyle: {
                    normal: {
                        borderRadius: 20,
                        // 可以在这里修改柱子的颜色
                        color: function (params) {
                            return mycolor[params.dataIndex]
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        //  图形内显示
                        position: "inside",
                        // 文字显示格式 {c}--会自动解析成数据 data里的数据
                        formatter: "{c}%"
                    }
                }

            },
            {
                name: '框',
                type: 'bar',
                yAxisIndex: 1,
                barCategoryGop: 50,
                barWidth: 15,
                itemStyle: {
                    color: 'none',
                    borderColor: '#00c1de',
                    borerWidth: 3,
                    borderRadius: 15
                },
                data: [100, 100, 100, 100, 100, 100],

            }
        ]
    };
    // option && myChart.setOption(option);
    this.dom = echarts.init(this.$refs.dom);
    this.dom.setOption(option, true);
    // 让图标跟着屏幕自动适应
    window.addEventListener('resize', function () {
        this.dom.resize()
    })
    },
  },
  mounted() {
    this.initChart()
  },
};
</script>
